import { ScrollView, StyleSheet } from 'react-native';
import * as React from 'react';
import LiveCard from './LiveCard';
import { trainers } from '../../constants/DataList';

const courseList = [
  {
    id: 1,
    title: "35'HIIT 高效燃脂骑行",
    image: '',
    time: '4',
    trainer: trainers[0],
  },
  {
    id: 2,
    title: '瑜伽舒缓·全身舒展',
    image: '',
    time: '4',
    trainer: trainers[2],
  },
  {
    id: 3,
    title: '马甲线养成',
    image: '',
    time: '13',
    trainer: trainers[1],
  },
];

export default function CurrentLiveList() {
  return (
    <ScrollView
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      style={styles.container}>
      {courseList.map(it => (
        <LiveCard
          key={it.id}
          title={it.title}
          image={it.image}
          time={it.time}
          trainer={it.trainer}
          style={styles.liveCard}
        />
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 12,
    overflow: 'visible',
  },
  liveCard: {
    marginRight: 12,
  },
});
